<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">123</button>
    <!-- <script src="./index.js"></script> -->
    <script>
      function reactive(obj) {
        return new Proxy(obj, {
          get(target, key) {
            console.log("get", key);
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            console.log("set", key, value);
            return Reflect.set(target, key, value);
          },
        });
      }
      let p = {};
      let q = {
        bar: "1",
      };
      let parent = reactive(q);
      let child = reactive(p);
      Object.setPrototypeOf(child, parent);
      console.log(child);
      // has
      child.bar = "123";
      console.log(child);
    </script>
  </body>
</html>
